import React, { useState, useRef, useEffect } from 'react';
import { Button, Table, message } from 'antd';
import { colWidth } from '@/utils/tools';
import { useHeight } from '@/utils/hooks/height';
import PageTitle from '@/components/pageTitle';
import { getSystemApi, deleteSystemApi } from '@/request/system';
import Icon from '@/components/layout/Icon';
import SetEnv from './edit';

import styles from './index.module.css';

const EnvList = () => {
  const dialog = useRef<any>(null);
  const [systems, setSystems] = useState([]);
  const { height } = useHeight(300);

  const getSystemList = async () => {
    try {
      const res: any = await getSystemApi({ page: 1, pageSize: 1000 });
      if (res) {
        setSystems(res);
      }
    } catch (err: any) {
      console.log(err.message);
    }
  };
  const handleDelete = async (reocrd) => {
    try {
      const res = await deleteSystemApi({ id: reocrd._id });
      if (res) {
        message.success('删除成功');
        getSystemList();
      }
    } catch (err: any) {
      console.log(err.message);
    }
  };
  const handleEdit = (record) => {
    dialog.current.handleOpen(true, record);
  };
  const columns: any = [
    {
      title: '项目名称',
      dataIndex: 'gitlabName',
      fixed: 'left',
      width: 200,
    },
    {
      title: '系统名称',
      dataIndex: 'systemName',
      width: 200,
    },
    {
      title: '访问环境',
      dataIndex: 'env',
      width: 100,
      align: 'center',
    },
    {
      title: '访问地址',
      dataIndex: 'webUrl',
      width: 300,
      render: (text: string) => (
        <a href={text} target="_blank" className="tableTitle">
          {text}
        </a>
      ),
    },
    {
      title: 'Jenkins地址',
      dataIndex: 'jenkinsUrl',
      width: 400,
      render: (text: string) => (
        <a href={text} target="_blank" className="tableTitle">
          {text}
        </a>
      ),
    },
    {
      title: '操作',
      dataIndex: 'operation',
      fixed: 'right',
      width: 120,
      render(text, record) {
        return (
          <div className={styles.linkBtn}>
            <div
              className={styles.link}
              onClick={() => {
                handleEdit(record);
              }}
            >
              编辑
            </div>
            <div
              className={styles.link}
              onClick={() => {
                handleDelete(record);
              }}
            >
              删除
            </div>
          </div>
        );
      },
    },
  ];

  useEffect(() => {
    getSystemList();
  }, []);
  return (
    <div className="env-list">
      <PageTitle title="洞窝系统" />
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div className={styles.title}>洞窝系统列表</div>
        <Button
          type="primary"
          className="flex"
          style={{ marginBottom: '20px' }}
          onClick={() => {
            dialog.current.handleOpen(false);
          }}
          icon={<Icon src="/images/add.png" width={16} height={16} style={{ marginRight: '4px' }} />}
        >
          添 加
        </Button>
      </div>
      {/* <Button
        onClick={() => {
          handleJenkins();
        }}
      >
        批量设置jenkins
      </Button> */}
      <Table columns={columns} dataSource={systems} rowKey="_id" scroll={{ x: colWidth(columns), y: height }}></Table>
      <SetEnv
        ref={dialog}
        handleSubmit={() => {
          getSystemList();
        }}
      />
    </div>
  );
};

export default EnvList;
